import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import { Text, View } from "@tarojs/components";
import { AtButton, AtIcon, AtModal } from "taro-ui";
import { getUserExtraPhonesInfo } from "@/business/services/user/userInfo";
import IconFont from "@/assets/Iconfont";
import classNames from "classnames";
import cssModule from './index.module.scss'

const typeList = [
    {
        value: 'virtual',
        name: '虚拟号码拨打'
    },
    {
        value: 'real',
        name: '真实号码拨打'
    }
]

export default function SafePhoneModal({ contactMobile, isOpened, onClose }) {

    const [type, setType] = useState(typeList[0].value)

    // 真实号码
    const [mobile, setMobile] = useState('')
    // 虚拟号码时长
    const [virtualMobileTime, setVirtualMobileTime] = useState(0)


    const getPersonUserInfo = async () => {
        const { data } = await getUserExtraPhonesInfo()
        setMobile(data?.phoneNumber || '')
        setVirtualMobileTime(data?.expireMinutes || 0)
    }

    const handleToPay = () => {
        Taro.navigateTo({
            url: `/subPackages/editPhone/index`,
        })
    }

    const handleCall = () => {
        if (type === 'virtual' && virtualMobileTime < 5) {
            Taro.showToast({
                title: '没有虚拟号',
                icon: 'none'
            })
            return

        }
        Taro.makePhoneCall({
            phoneNumber: contactMobile,
            success: () => {
                onClose?.()
            },
            fail: (err) => {
                console.error('拨打电话失败:', err)
                Taro.showToast({
                    title: '拨打失败',
                    icon: 'none'
                })
            }
        })
    }

    useEffect(() => {
        if (isOpened) {
            getPersonUserInfo()
        }
    }, [isOpened])

    return <AtModal isOpened={isOpened} onClose={() => onClose?.()} className={cssModule.safePhoneModal}>
        <View className=" relative">
            {/* 关闭按钮 */}
            <View className=" p-0.5 absolute top-2.5 right-3" onClick={() => onClose?.()}>

                <AtIcon value='close' size='12' color='#fff'></AtIcon>
            </View>

            <View className={cssModule.topBox}>

                <View className={cssModule.title}>豹友群安全号</View>
                <View className={cssModule.subtitle}>您已绑定号码:{mobile}</View>
                <View onClick={handleToPay} className={cssModule.tips}>若非本机手机号请修改 <IconFont name='arrow' size={28} color='#fff'></IconFont></View>

            </View>
            <View className={cssModule.bottomBox}>
                <View className=" flex gap-1 items-center justify-center">
                    <View className=" size-4 bg-[#8E9094] rounded-full text-white text-xs leading-4 text-center">
                        ?
                    </View>
                    <Text className=" text-sm flex-1">号码保护，隐藏双方真实号码，纠纷有保障!</Text>
                </View>
                <View className="text-[#FF9C62] text-xs text-center pt-0.5">
                    请勿设置呼叫转移，否则对方无法联系到你
                </View>

                <View className=" pt-6 flex justify-between gap-4">
                    {
                        typeList.map(item => (
                            <View key={item.value} onClick={() => setType(item.value)} className={classNames(
                                cssModule.typeItem,
                                {
                                    [cssModule.typeSelected]: item.value === type
                                }
                            )}>
                                {item.value === typeList[0].value &&
                                    <View
                                        className=" absolute top-0 left-0 text-xs text-white font-medium px-2 py-0.5 bg-[#FF9C62] rounded-br-xl"
                                    >
                                        纠纷有保障
                                    </View>}
                                {item.name}
                            </View>
                        ))
                    }
                </View>

                <View className='pt-8'>
                    <AtButton type='primary' circle onClick={handleCall} >立即拨打</AtButton>
                </View>
                <View className='pt-4 text-center '>
                    <Text className='text-xs'>
                        您的虚拟号码通话服务剩余 {virtualMobileTime}分钟，
                    </Text>
                    <Text className='text-[#0079FE] text-xs' onClick={handleToPay}>
                        前往充值&gt;
                    </Text>
                </View>

            </View>



        </View>


        {/* <AtModalContent>
    这里是正文内容，欢迎加入京东凹凸实验室
    这里是正文内容，欢迎加入京东凹凸实验室
    这里是正文内容，欢迎加入京东凹凸实验室
  </AtModalContent>
  <AtModalAction> <Button>取消</Button> <Button>确定</Button> </AtModalAction> */}
    </AtModal>
}